<template>
  <div class="container">
    <div class="top-line">
      <div class="menu">MENU</div>
      <div class="date">{{ formattedDate }}</div>
    </div>
    <div class="cardList">
      <div class="card cardOne">
        <router-link to="/mapLeft">
          <h3>DISASTER-STRICKEN<br />PLANTS</h3>
          <p>人类的灾难中植物感受到了什么?</p>
        </router-link>
      </div>
      <div class="card cardTwo">
        <router-link to="/map">
          <h3>THE PLANTS AROUND<br />ME</h3>
          <p>你有留意过周围的植物吗?</p>
        </router-link>
      </div>
    </div>
  </div>
</template>
  
<script setup>
import { ref, onMounted } from "vue";

const formattedDate = ref("");

// 格式化日期为 "YYYY年MM月DD日" 形式
function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}/${month}/${day}`;
}

onMounted(() => {
  // 使用小写的 Date.now() 获取当前时间戳
  const timestamp = Date.now();
  formattedDate.value = formatDate(new Date(timestamp));
});
</script>
  
<style lang="less" scoped>
.container {
  font-family: "siyuan", sans-serif; // 使用导入的字体
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;

  .top-line {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: center;
    top: 3vh;
    left: 0;
    padding: 0 6vw;
    width: 54vw;
    font-size: 1vw;

    .menu {
      cursor: pointer;
    }

    .date {
      font-weight: normal; // 使用正常字体
    }
  }

  .cardList {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    top: 50%;
    display: flex;
    justify-content: space-between;
    width: 75vw;

    .card {
      width: 28vw;
      height: 24vw;
      backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.05);
      border-radius: 1.5vw;
      box-shadow: rgba(255, 255, 255, 0.7) 0 0 20px,
        rgba(255, 255, 255, 0.3) 0 0 40px inset;
      background: url("@/assets/images/chart1.png") center 55% no-repeat;
      background-size: 60% 30%;
      cursor: pointer;
      transition: all 0.3s;

      a {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        color: #fff;
      }

      h3 {
        font-size: 1.9vw;
        padding-top: 12%;
      }

      p {
        font-size: 1.4vw;
        padding-bottom: 14%;
      }

      &:hover {
        box-shadow: rgba(194, 209, 253, 0.7) 0 0 20px,
          rgba(194, 209, 253, 0.3) 0 0 40px inset,
          rgba(194, 209, 253, 0.2) 0 0 440px inset;
      }
    }
  }
}
</style>